<template>
	<view>
		<view :class="showSearch == true ? 'dpn' : ''">
			<!-- 搜索框 -->
			<uni-nav-bar class="topSearch">
				<template slot="left">
					<image class="top-img" src="/static/image/search/6.png"></image>
				</template>
				<view class="top-search flex-box" @click="openSearch">
					<image class="search-icon" src="/static/image/search/2.png"></image>
				</view>
				<template slot="right">
					<image class="top-img" src="/static/image/mine/r.png"></image>
				</template>
			</uni-nav-bar>
			<!-- 导航栏 -->
			<view class="page-content">
				<mescroll-uni :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
					<!-- 轮播图 -->
					<view class="banner">
						<swiper :indicator-dots="true" :autoplay="true" indicator-color="rgba(255,255,255, .5)"
							indicator-active-color="#ff372b" :interval="3000" :duration="500" circular>
							<swiper-item v-for="(item, index) in bannerList" :key="index">
								<view class="item">
									<image :src="item.imageUrl" class="img"></image>
									<view class="tag">
										{{ item.typeTitle }}
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<!-- 主入口 -->
					<view class="main-bar flex-box">
						<view class="flex-item" v-for="(item, index) in contentBar" :key="index">
							<image :src="'../../static/image/index/t_' + (index + 1) + '.png'" class="img"></image>
							<view>{{ item.name }}</view>
						</view>
					</view>
					<!-- 推荐歌单 -->
					<song-list title="推荐歌单" linkTitle="歌单广场" :className="false" link=""
						:list="recommendSongs"></song-list>
					<!-- 新碟新歌 -->
					<view class="song-list">
						<view class="switch-line flex-box">
							<view class="flex-box">
								<view class="switch-item" :class="newType == 1 ? 'on' : ''" @click="switchTab(1)">
									新碟
								</view>
								<view class="switch-item" :class="newType == 2 ? 'on' : ''" @click="switchTab(2)">
									新歌
								</view>
							</view>
							<view class="more">
								{{ newType == 1 ? "更多新碟" : "更多新歌" }}
							</view>
							<!-- <template v-if="newType == 1">
					<view class="more">
						更多新碟
					</view>
				</template> -->
							<!-- <template v-if="newType == 2">
					<view class="more">
						更多新歌
					</view>
				</template> -->
						</view>
						<scroll-view class="scroll-view" scroll-x>
							<view class="item" v-for="(item, index) in latestAlbum" :key="index">
								<image class="img" :src="item.picUrl"></image>
								<view class="desc ellipsis">
									{{ item.name }}
								</view>
								<view class="desc ellipsis c9">
									{{ item.artist.name }}
								</view>
							</view>
						</scroll-view>
					</view>
					<!-- 精选视频 -->
					<view class="video-list song-list">
						<view class="tit-bar">
							精选视频
							<view class="more fr">
								更多
							</view>
						</view>
						<view class="video-item" v-for="(item, index) in relatedVideo" :key="index">
							<image :src="item.coverUrl" mode="" class="img"></image>
							<view class="desc ellipsis">
								{{ item.title }}
							</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>
		<search ref="search" @close="closeSearch()"></search>
	</view>
</template>

<script>
import { apiGetBanner, apiGetRecommendSong, apiGetTopAlbum, apiGetRelatedVideo } from '@/apis/index'
import songList from '@/components/songList.vue'
import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue'
import search from '@/components/search.vue'
import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
export default {
	data() {
		return {
			// 轮播数据
			bannerList: [],
			// 主入口数据
			contentBar: [
				{ name: '每日推荐' },
				{ name: '歌单' },
				{ name: '排行榜' },
				{ name: '电台' },
				{ name: '每日推荐' },
			],
			// 推荐歌单数据
			recommendSongs: [],
			newType: 1,
			// 新碟新歌数据
			latestAlbum: [],
			relatedVideo: [],
			showSearch: false,
			downOption: {                     //下拉刷新
				auto: false
			},
			upOption: {                       //上拉加载下一页
				auto: false,
				page: {
					num: 0,                   //起始页
					size: 10,                 //一页条数
				}
			},
			curNav: 0,
		}
	},
	components: {
		songList,
		search,
		MescrollUni,
		uniNavBar
	},
	onLoad() {
		this.getBanner();
		this.getRecommendSongs();
		this.getTopAlbum();
		this.getRelatedVideo();
	},
	// 下拉刷新
	onPullDownRefresh() {
		setTimeout(() => {
			this.getRecommendSongs();
			this.getTopAlbum();
			this.getRelatedVideo();
			uni.showToast({
				title: "刷新成功",
				icon: 'none',
				success: () => {
					uni.stopPullDownRefresh();
				}
			})

		}, 1000);
	},
	methods: {
		// 获取轮播图
		async getBanner() {
			const res = await apiGetBanner();
			// console.log(res);
			this.bannerList = res.banners;
		},
		// 获取歌单
		async getRecommendSongs() {
			const res = await apiGetRecommendSong();
			this.recommendSongs = res.result;
			// console.log(this.recommendSongs);
		},
		// 新歌新碟
		async getTopAlbum() {
			const res = await apiGetTopAlbum();
			// console.log(res.albums);
			if (this.newType == 1) {
				this.latestAlbum = res.albums.slice(0, 6)
			} else {
				this.latestAlbum = res.albums.slice(5, res.albums.length)

			}
		},
		// 新歌新碟切换
		switchTab(type) {
			this.newType = type
			this.getTopAlbum();
		},
		// 获取视频封面
		async getRelatedVideo() {
			let params = {
				id: Math.floor(Math.random() * (1 - 3000)) + 3000
			}
			const res = await apiGetRelatedVideo(params);
			this.relatedVideo = res.data
			console.log(this.relatedVideo);
		},
		//下拉刷新回调
		downCallback(mescroll) {
			console.log("downcallback")
			//重置列表为第一页(自动执行page.num=1，再触发upcallback方法)
			mescroll.resetUpScroll();
		},
		//上拉加载回调
		upCallback(mescroll) {
			console.log("upcallback", mescroll)
			//加载下一页数据
			this.getList(mescroll.num, mescroll.size, res => {
				//若是第一页 则清空
				if (mescroll.num == 1) {
					this.relatedVideo = [];
				}
				//累加数据
				this.relatedVideo = this.relatedVideo.concat(res);
				//成功的回调，隐藏刷新状态
				mescroll.endSuccess();
			}, () => {
				//失败的回调，隐藏下拉刷新状态
				mescroll.endErr();
			})
		},
		getList(pageNum, pageSize, successCallback, errCallback) {
			const params = {
				// id 从1开始
				id: this.curNav + 1,
				pageNum,
				pageSize
			}
			apiGetRelatedVideo(params).then(res => {
				successCallback && successCallback(res.data);
			}, err => {
				errCallback && errCallback(err);
			})
		},
		// 打开搜索页
		openSearch() {
			this.showSearch = true;
			this.$refs.search.open()
		},
		closeSearch() {
			this.showSearch = false;
		}
	}
};
</script>

<style lang="scss">
.uni-navbar__header{
	width: 750rpx;
	display: flex;
	justify-content: space-between !important;
}
page {
	color: #1a1a1a;
	font-size: 24rpx;
}

.dpn {
	display: none;
}

.top-img {
	width: 50rpx;
	height: 50rpx;
	margin-top: 20rpx;
}

.top-search {
	width: 460rpx;
	/* #ifdef MP-WEIXIN */
	width: 460rpx;
	// margin-left: -60rpx;
	/* #endif */
	height: 72rpx;
	margin-right: 24rpx;
	border-radius: 72rpx;
	color: #c6c6c6;
	background: #f7f7f7;
	align-items: center;
	justify-content: center;

	.search-icon {
		width: 28rpx;
		height: 29rpx;
		margin-right: 12rpx;
	}
}

.page-content {
	position: fixed;
	top: 64px;
	left: 0;
	right: 0;
	bottom: 0px;
	/* #ifdef H5 || MP-WEIXIN */
	top: 44px;
	/* #endif */
}

.banner {
	width: 100%;
	height: 268rpx;
	margin: 120rpx auto 44rpx;

	.swiper {
		height: 268rpx;
	}

	.item {
		position: relative;
		display: block;
		width: 686rpx;
		height: 268rpx;
		margin: 0 auto;
		border-radius: 14rpx;
		overflow: hidden;
	}

	.img {
		display: block;
		width: 100%;
		height: 100%;
	}

	.tag {
		position: absolute;
		bottom: 0;
		right: 0;
		height: 34rpx;
		padding: 0 14rpx;
		line-height: 34rpx;
		color: #fff;
		background: #43a5f0;
		z-index: 10;
		border-top-left-radius: 14rpx;
	}
}

.main-bar {
	justify-content: space-around;
	padding-bottom: 22rpx;
	margin: 0 50rpx;
	text-align: center;
	line-height: 70rpx;
	color: #666;
	border-bottom: 1rpx solid #e6e6e6;

	.img {
		display: block;
		width: 92rpx;
		height: 92rpx;
		margin: 0 auto;
	}

	.flex-item {
		position: relative;

		.date {
			position: absolute;
			left: 50%;
			top: 40rpx;
			line-height: 1;
			font-size: 24rpx;
			color: #ff392d;
			transform: translateX(-50%) scale(0.8);
		}
	}
}

.song-list {
	padding-left: 32rpx;

	.tit-bar {
		font-size: 34rpx;
		font-weight: 600;
		line-height: 110rpx;
	}

	.more {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		margin-top: 30rpx;
		margin-right: 32rpx;
		color: #333;
		font-weight: 400;
		font-size: 24rpx;
		border: 2rpx solid #e6e6e6;
		border-radius: 50rpx;
	}

	.switch-line {
		justify-content: space-between;
		color: #999;

		.flex-box {
			line-height: 110rpx;
			width: 300rpx;
		}

		.switch-item {
			font-weight: 600;

			&:first-child {
				width: 80rpx;
			}

			&:last-child {
				padding-left: 22rpx;
			}

			&.on {
				color: #333;
				font-size: 34rpx;
			}
		}
	}

	.scroll-view {
		width: 100%;
		white-space: nowrap;
	}

	.item {
		position: relative;
		display: inline-block;
		width: 218rpx;
		padding-bottom: 16rpx;
		margin-right: 16rpx;
		line-height: 34rpx;

		&:before {
			content: ' ';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 40rpx;
			z-index: 2;
			background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent);
		}

		&.video {
			width: 450rpx;
		}

		.img {
			display: block;
			width: 100%;
			height: 218rpx;
			margin-bottom: 16rpx;
			background: #eee;
			border-radius: 10rpx;
		}
	}

	.count {
		position: absolute;
		top: 0;
		right: 0;
		padding-left: 25rpx;
		line-height: 34rpx;
		color: #fff;
		font-size: 24rpx;
		z-index: 10;
		background: url() no-repeat;
		background-size: 25rpx 25rpx;
		transform: scale(0.8);
	}
}

.video-list {
	padding-left: 0;

	.tit-bar {
		padding-left: 32rpx;
	}

	.video-item {
		width: 686rpx;
		height: 490rpx;
		margin: 0 auto;
		background: #f8f8f8;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 24rpx;
	}

	.img {
		display: block;
		width: 686rpx;
		height: 390rpx;
		background: #eee;
	}

	.desc {
		padding-left: 40rpx;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 100rpx;
	}
}

.topSearch {
	// width: 750rpx;
	position: fixed;
	z-index: 3;
}

/*
	 *平台差异化处理的代码可以放在底部，这样有利于集中管理
	*/
/* #ifdef MP-WEIXIN */
.banner {
	margin-top: 60rpx;
}

/* #endif */
</style>